<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多彩贵州</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body style="background-image: url('wanfengling.png'); background-size: cover; background-position: center;">
    <header>
        <h1>走遍大地神州 醉美多彩贵州</h1>
    </header>
    
    <div class="container">
        <div class="chat-container">
            <div class="chat-messages" id="chat-messages">
                <div class="message bot-message">
                    <div class="message-content">
                        您好！我是黔小贵。请问有什么可以帮您的吗？
                    </div>
                    <button class="tts-btn" title="朗读此消息">🔊</button>
                </div>
            </div>
            
            <div class="typing-indicator" id="typing-indicator">思考
                <span></span>
            </div>
            
            <!-- 语音控制按钮 -->
            <div class="voice-controls">
                <button class="voice-btn" id="play-btn" disabled>
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                        <path d="M3 2v12l10-6z"/>
                    </svg>
                    播放
                </button>
                <button class="voice-btn" id="pause-btn" disabled>
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                        <path d="M3 2h3v12H3V2zm7 0h3v12h-3V2z"/>
                    </svg>
                    暂停
                </button>
                <button class="voice-btn" id="stop-btn" disabled>
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                        <rect x="2" y="2" width="12" height="12" rx="1"/>
                    </svg>
                    停止
                </button>
            </div>
            
            <div class="input-area">
                <input type="text" id="user-input" placeholder="输入您的问题..." autocomplete="off">
                <button id="send-button">发送</button>
            </div>
        </div>
    </div>
    
    <script src="scripts.js"></script>
</body>
</html>